<template>
    <div id="dispense" navbar-fixed style="width:100%;" class="page">
        <van-dialog
                v-model="show"
                show-cancel-button
                @confirm="confirm"
                :before-close="beforeClose"
        >
            <p class="toastti">请输入该车牌绑定的手机号码</p>
            <van-field
                    v-model="username"
                    ref="tellphone"
                    clearable
                    placeholder="请输入手机号码"
            />
        </van-dialog>

        <div class="content-car-number bind">
            <img src="./img/parkBg.jpg" style="width: 100%;">

            <div class="plate-box-padding">
                <div class="plate-box-title">
                    <div class="alignleft">
                        <img style="height: 18px" src="./img/car.png">
                        <div class="plate-box-text">&nbsp;输入车牌号码</div>
                    </div>
                    <div class="alignright">
                        <a class="purplebtn" @click="btnClickNoCardno">
                            <van-icon name="wap-nav"/>&nbsp;无牌车缴费</a>
                    </div>
                </div>
                <div class="h2-tit">请点击输入框输入车牌号码进行缴费查询</div>

                <div class="brand brand-long">
                    <div id="bindCar" class="inner">
                        <input id="font" @click="btnClickYue" v-bind:class="{active: isYue }" type="text" maxlength="1"
                               :value="areaName" readonly="readonly">
                        <input id='letter' @click="btnClickA" v-bind:class="{active: isA}" type="text" maxlength="1"
                               :value="areaLetter" readonly="readonly">
                        <input id='numOne' @click="btnClickNum('one')" v-bind:class="{active: isNumOne }" type="text"
                               maxlength="1" :value="numOne" readonly="readonly">
                        <input id='numTwo' @click="btnClickNum('two')" v-bind:class="{active: isNumTwo }" type="text"
                               maxlength="1" :value="numTwo" readonly="readonly">
                        <input id='numThree' @click="btnClickNum('three')" v-bind:class="{active: isNumThree }"
                               type="text" maxlength="1" :value="numThree" readonly="readonly">
                        <input id='numFour' @click="btnClickNum('four')" v-bind:class="{active: isNumFour }" type="text"
                               maxlength="1" :value="numFour" readonly="readonly">
                        <input id='numFive' @click="btnClickNum('five')" v-bind:class="{active: isNumFive }" type="text"
                               maxlength="1" :value="numFive" readonly="readonly">
                        <input v-if="checkbox" id='numSix' @click="btnClickNum('six')"
                               v-bind:class="{active: isNumSix }" type="text" maxlength="1" :value="numSix"
                               readonly="readonly" placeholder="+">
                    </div>
                </div>
                <div class="btns plate-box-padding-bottom">
                    <a class="orangebtn fl" @click="bindShowClick">已绑定车牌</a>
                    <a class="greenbtn fr" @click="completeClick('true')">确定</a>
                </div>
            </div>
            <div class="paymentInfo">
                <div class="title"><span>停车记录</span></div>
                <div class="historyList">
                    <table>
                        <thead>
                        <tr class="plate-park-list-border">
                            <th>车牌号</th>
                            <th>日期</th>
                            <th>时长</th>
                            <th>选此车</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,i) in historyList" class="history-border">
                            <td class="plate-park-list-font">{{item.carNo.replace(/-/g,'')}}</td>
                            <td class="plate-park-list-font">{{item.date}}</td>
                            <td class="plate-park-list-font">{{item.time}}</td>
                            <td>
                                <van-button class="plate-park-list-btn" size="mini"
                                            @click="chooseCarno(item.carNo.replace(/-/g,''))">选择
                                </van-button>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <van-popup
                v-model="bindShow"
                closeable
                position="bottom"
                :style="{ height: 'auto' }"
        >
            <div class="fixbottom">
                <h2 class="title">
                    <span>选择车牌</span>
                </h2>
                <ul class="chooseList">
                    <li @click="historyNum" v-for="(item,key) in bindList" :key="key">
                        <div class="chooseBtn">{{ item.numberPlate }}</div>
                    </li>
                </ul>
            </div>
        </van-popup>
        <van-popup
                v-model="statesh"
                closeable
                position="bottom"
                :style="{ height: '460px' }"
        >
            <div class="parking-title">支付停车费</div>
            <div class="parking-note">*完成缴费后请30分内离场，否则将重新计费</div>
            <div class="parking-carNo">{{plateNumber}}</div>
            <van-cell-group>
                <van-cell title-class="parking-title-style1" value-class="parking-title-style1" title="停车场"
                          v-model="parkingName"/>
                <van-cell title-class="parking-title-style1" value-class="parking-title-style1" title="停车时长"
                          v-model="timeDifferences"/>
                <van-cell title-class="parking-title-style1" value-class="parking-title-style1" title="入场时间"
                          v-model="entranceTime"/>
                <van-cell title-class="parking-title-style1" value-class="parking-title-style1" title="订单有效时长">
                    <van-count-down
                            ref="countDown"
                            :time="180000"
                            :auto-start="false"
                            format="mm:ss"
                            @finish="finished"
                    />
                </van-cell>
                <van-cell title-class="parking-title-style1" value-class="parking-title-style2" title="停车费"
                          v-model="serviceFee"/>
                <!-- 优惠券单元格 -->
                <van-coupon-cell v-model="couponShow" title-class="parking-title-style1"
                                 :coupons="coupons"
                                 :chosen-coupon="chosenCoupon"
                                 @click="showList = true"
                />
                <!--<van-cell title-class="parking-title-style1" value-class="parking-title-style2" title="积分抵扣" v-model="integral"/>-->
            </van-cell-group>
            <van-row class="van-cell" style="padding-top: 15px;line-height: 40px;">
                <van-col class="parking-title-style1" span="12">合计：<span class="feeClass">{{remainingFee}}元</span>
                </van-col>
                <van-col span="12" style="text-align: right">
                    <van-button v-if="remainingFee > 0" icon="wechat" size="normal" round type="primary"
                                @click="DialogConfirm">微信支付
                    </van-button>
                    <van-button v-else size="normal" round type="warning" @click="FreeConfirm">优惠券支付
                    </van-button>
                </van-col>
            </van-row>
        </van-popup>
        <!-- 优惠券列表 -->
        <van-popup v-model="showList" position="bottom">
            <van-coupon-list
                    :coupons="coupons"
                    :chosen-coupon="chosenCoupon"
                    :disabled-coupons="disabledCoupons"
                    @change="onChange"
                    @exchange="onExchange"
            />
        </van-popup>
        <van-dialog
                v-model="freeTime"
                confirmButtonText="确认"
        >
            <div class="parking-title">停车详情</div>
            <van-cell-group>
                <van-cell title="停车场:" v-model="parkingName"/>
                <van-cell title="驾入时间:" v-model="entranceTime"/>
                <van-cell title="剩余免费分钟:" v-model="surplusMinute"/>
            </van-cell-group>
        </van-dialog>

        <div class="keyboard" v-if="keyboardShow" :class='{animationDown:isDown,animationUp:isUp}'>
            <button class="btn-complete" @click="completeClick('true')"><span>完成</span></button>
            <div v-if="keyboard == 'txt'">
                <div class="keyboard-row" v-for="(item,rows) in carTxt">
                    <button class="keyboard-row-item" v-for="(i,index) in item.name"
                            @click="btnWordClick(rows,index,i)">{{i}}
                    </button>
                </div>
                <div class="keyboard-row">
                    <button class="keyboard-row-item" @click="btnBottomClick('鲁')">鲁</button>
                    <button class="keyboard-row-item" @click="btnBottomClick('使')">使</button>
                    <button class="keyboard-row-item" @click="btnBottomClick('领')">领</button>
                    <button v-for="j in noneBottom" class="none-botton">{{j}}</button>
                    <div class="keyboard-row-item clear" @click="clearClick">
                        　<img src="./img/del.png" alt="删除">
                    </div>
                </div>
            </div>
            <div v-if="keyboard == 'num'">
                <div class="keyboard-row keybyn" v-for="(item,rows) in carNum">
                    <button :disabled="!isSelectl?isDisable && i<10 :isDisable&& rows!=0 " class="keyboard-row-item"
                            v-for="(i,index) in item.name" @click="btnWordClick(rows,index,i)">{{i}}
                    </button>
                    <button v-if="rows == 3" class="keyboard-row-item clear" @click="clearClick">
                        　<img src="./img/del.png" alt="删除">
                    </button>
                </div>
                <!--<div class="keyboard-row keynts">-->
                <!--<button :disabled="isSelectl" v-for="item in carNumBottom" class="keyboard-row-item bottom"-->
                <!--@click="btnBottomNumClick(item)">{{item}}-->
                <!--</button>-->
                <!--<div class="keyboard-row-item clear" @click="clearClick">-->
                <!--　<img src="./img/del.png" alt="删除">-->
                <!--</div>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {NavBar, Toast, Dialog, Icon, CouponCell, CouponList} from 'vant';
    import "./css/parking.css";
    import Cookies from 'js-cookie'

    Vue.use(CouponCell).use(CouponList);

    export default {
        name: 'Dispense',
        data() {
            return {
                isActive: false,
                msg: "暂无停车缴费信息",
                externalOrderId: "",
                verificationInfo: "",
                payTime: "",
                payment: "",
                orderId: "",
                checked: false,
                token: "",
                appId: "",
                timeStamp: "",
                nonceStr: "",
                packages: "",
                signType: "",
                freeTime: false,
                paySign: "",
                mobilePhone: "",
                serviceFee: "",
                remainingFee: "",
                plateNumber: "",//完整车牌号
                outTradeNo: "",//商户订单号
                cardnum: "",//输入的车牌号
                statesh: false,//停车信息卡
                parkingName: "",//停车场地名字
                timeDifferences: "",//停车时间
                entranceTime: "",//进场时间
                parkingFee: "",//总停车费
                carOrder: "",//捷顺订单
                surplusMinute: "",//剩余免费时间分钟数
                availableTime: 0,
                chosenCoupon: -1,
                coupons: [],
                disabledCoupons: [],
                showList: false,
                integral: "-0元",//积分
                popupHeight: "",//缴费弹出窗高度
                historyList: [],
                openid: "",
                show: false,
                username: '',
                password: '',
                numlist: true,
                carNum: "",
                isFeeHourClick: false,
                checkShow: true,
                checkbox: true,
                isDown: false,
                isUp: false,
                selected: null,
                isSelectx: false,
                isSelectl: false,
                key: 1,
                areaName: '粤',
                areaLetter: '',
                numOne: '',
                numTwo: '',
                numThree: '',
                numFour: '',
                numFive: '',
                numSix: '',
                isYue: false,
                keyboardShow: false,
                keyboard: false,
                isA: false,
                isNumOne: false,
                isNumTwo: false,
                isNumThree: false,
                isNumFour: false,
                isNumFive: false,
                isNumSix: false,
                isDisable: false,
                isOne: false,
                isTwo: false,
                isThree: false,
                isFour: false,
                isFive: false,
                isSix: false,
                isSeven: false,
                isEight: false,
                isOther: false,
                typechagel: false,
                carTxt: [
                    {name: ['粤', '渝', '京', '泸', '鄂', '湘', '川', '闽', '晋', '黑']},
                    {name: ['津', '浙', '豫', '赣', '贵', '青', '琼', '宁', '吉', '蒙']},
                    {name: ['翼', '苏', '皖', '桂', '云', '陕', '甘', '藏', '新', '辽']}
                ],
                carNumBottom: ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警'],
                noneBottom: ['', '', '', '', '', ''],
                noneBottomtxt: ['', ''],
                carNum: [
                    {name: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']},
                    {name: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '澳']},
                    {name: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '港']},
                    {name: ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警']},
                ],
                addedCarNum: '',
                carnump: "",
                bindShow: false,//已绑定车牌弹窗
                couponShow: true,//优惠券显示框
                bindList: [] //绑定车牌列表
            }
        },
        watch: {
            checkbox: function (val) {
                this.typechagel = val;
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.numSix = ''
                const vm = this
                if (!val) { // 切换到普通车牌
                    if (vm.numFour) {
                        vm.isNumFive = true
                        vm.key = 7
                    }
                } else { // 切换到新能源车牌
                    if (vm.numFive) {
                        vm.isNumSix = true
                        vm.key = 8
                    }
                }
            }
        },
        mounted() {
            document.body.addEventListener('touchstart', function () {
            });
            this.openid = Cookies.get("token")
            if (this.openid == undefined || this.openid == "") {
                return;
            }
            this.$api.parking.recent({openId: this.openid})
                .then((res) => {
                    this.historyList = res.data;
                    console.log(this.historyList);
                })
            //this.btnClickA();
        },
        methods: {
            // *
            mul: function (a, b) {//主体
                var c = 0,
                    d = a.toString(),
                    e = b.toString();
                try {
                    c += d.split(".")[1].length;
                } catch (f) {
                }
                try {
                    c += e.split(".")[1].length;
                } catch (f) {
                }
                return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c);
            },

            timeDifference: function (olddata, newdata) {
                var date3 = new Date(newdata).getTime() - new Date(olddata).getTime();   //时间差的毫秒数      
                //计算出相差天数
                var days = Math.floor(date3 / (24 * 3600 * 1000))
                //计算出小时数
                var leave1 = date3 % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
                var hours = Math.floor(leave1 / (3600 * 1000))
                //计算相差分钟数
                var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
                var minutes = Math.floor(leave2 / (60 * 1000))
                //计算相差秒数
                var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
                var seconds = Math.round(leave3 / 1000)
                if (days == 0) {
                    return hours + "时" + minutes + "分" + seconds + "秒"
                } else {
                    return days + "天" + hours + "时" + minutes + "分" + seconds + "秒"
                }
            },
            callpay: function () {
                if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);
                        document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
                    }
                } else {
                    this.jsApiCall();
                }
            },
            query_order_pay_info: function () {
                this.axios.get('接口地址', {params: {}})
                    .then((response) => {
                        let datapayinfo = response.data.body;
                        if (datapayinfo.tradeState == 0) {
                            this.payTime = datapayinfo.payTime;

                            this.axios.post('', params)
                                .then((response) => {
                                    if (response.data.code == "0") {
                                        this.queryFeeByPhone(true);
                                    }
                                })
                                .catch(function (error) {
                                    console.log(error);
                                })
                        } else if (datapayinfo.tradeState == 1) {
                            Toast.fail('进行中');
                        } else if (datapayinfo.tradeState == 2) {
                            Toast.fail('未开始');
                        } else if (datapayinfo.tradeState == 3) {
                            Toast.fail('失败');
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            jsApiCall: function () {
                var thisl = this;
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    {
                        "appId": this.appId,
                        "timeStamp": this.timeStamp,
                        "nonceStr": this.nonceStr,
                        "package": this.packages,
                        "signType": this.signType,
                        "paySign": this.paySign
                    },
                    function (res) {
                        WeixinJSBridge.log(res);
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            //支付成功
                            thisl.$api.parking.cancel({carNo: thisl.plateNumber})//解除订单锁定 
                            thisl.$router.push({path: "/pay_success", query: {orderNo: thisl.carOrder}})
                        } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                            //取消支付
                            thisl.statesh = true;
                            thisl.$api.parking.cancel({carNo: thisl.plateNumber})//解除订单锁定 
                        } else {
                            thisl.statesh = false;
                            Toast.fail("支付失败！");
                            thisl.$api.parking.cancel({carNo: thisl.plateNumber})//解除订单锁定 
                        }

                    }
                );
            },
            timeStart() {
                setTimeout(() => {
                    this.$refs.countDown.reset();
                    this.$refs.countDown.start();
                }, 100)
            },
            //显示停车详情
            adddateist: function (response, flg) {
                Toast.clear();
                if (response.code == 0 && response.data.retcode == 0) {
                    if (response.data.discountFee == 0 && response.data.totalFee == 0) {
                        Toast.fail("无需缴费");
                        this.statesh = false;
                    } else {
                        this.couponShow = true
                        this.statesh = true;
                        this.checkShow = false;
                        this.
                        this.serviceFee = response.data.serviceFee;
                        this.remainingFee = response.data.totalFee;
                        this.parkingName = response.data.parkName;
                        this.timeDifferences = response.data.tt;
                        this.entranceTime = response.data.startTime;
                        this.carOrder = response.data.orderNo;
                        this.availableTime = response.data.validTimeLen * 1000;
                        this.timeStart();
                        return;
                    }
                } else if (response.code == 0 && response.data.retcode == 10) {
                    this.freeTime = true;
                    this.parkingName = response.data.parkName;
                    this.entranceTime = response.data.startTime;
                    this.surplusMinute = response.data.surplusMinute + "分钟";
                    return;
                } else if (response.code == 0) {//车辆不存在
                    Toast.fail(response.data.retmsg);
                    this.statesh = false;
                    // this.$router.push({path:"/pay_success",query:{orderNo:'4f771c80486540d09696c84da98c7b55'}})
                } else if (response.code == 500) {
                    Toast.fail(response.msg);
                    this.statesh = false;
                }
            },
            //显示无牌停车详情
            nocarnolist: function (response, flg) {
                Toast.clear();
                console.log(response)
                if (response.code == 0 && response.data.orderDto.retcode == 0) {
                    if (response.data.orderDto.totalFee == 0) {
                        Toast.fail("无需缴费");
                        this.statesh = false;
                    } else {
                        this.couponShow = false
                        this.statesh = true;
                        this.checkShow = false;
                        this.plateNumber = response.data.orderDto.cardNo;
                        this.serviceFee = response.data.orderDto.serviceFee;
                        this.remainingFee = response.data.orderDto.totalFee;
                        this.parkingName = response.data.orderDto.parkName;
                        this.timeDifferences = response.data.orderDto.tt;
                        this.entranceTime = response.data.orderDto.startTime;
                        this.carOrder = response.data.orderDto.orderNo;
                        this.timeStart();
                        return;
                    }
                } else if (response.code == 0 && response.data.orderDto.retcode == 1007) {
                    this.freeTime = true;
                    this.parkingName = response.data.orderDto.parkName;
                    this.entranceTime = response.data.orderDto.startTime;
                    this.surplusMinute = response.data.orderDto.surplusMinute + "分钟";
                    return;
                } else if (response.code == 0) {//车辆不存在
                    Toast.fail(response.data.orderDto.retmsg);
                    this.statesh = false;
                    // this.$router.push({path:"/pay_success",query:{orderNo:'4f771c80486540d09696c84da98c7b55'}})
                } else if (response.code == 500) {
                    Toast.fail(response.msg);
                    this.statesh = false;
                }
            },
            //查询停车费用
            queryFee: function (num, flg) {
                this.$api.couponmine.couponMinePark({openId: this.openid}).then(res => {
                    if (res.code == 0) {
                        console.log(res.data.coupons)
                        this.coupons = res.data.coupons
                        this.disabledCoupons = res.data.disabledCoupons
                        if (this.coupons.length > 0) {
                            //默认勾选第一个最快截止的优惠券
                            this.chosenCoupon = 0
                        }
                    }
                }).catch(error => {
                })
                Toast.loading({
                    mask: true,
                    message: '查询中...'
                });
                this.plateNumber = num;
                this.$api.parking.getCarOrder({carNo: num, openid: this.openid})
                    .then((response) => {
                        this.adddateist(response, flg);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            /*无牌车缴费*/
            btnClickNoCardno() {
                /*获取设备编号*/
                Toast.loading({
                    mask: true,
                    message: '查询中...'
                });
                var equipCode = this.$route.query.equipCode;
                console.log(equipCode)
                this.$api.parking.getNoCarnoOrder({equipCode: equipCode, userWxOpenId: this.openid})
                    .then((response) => {
                        this.nocarnolist(response, true);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            getParam: function (name) {
                var search = document.location.search;
                var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
                var matcher = pattern.exec(search);
                var items = null;
                if (null != matcher) {
                    try {
                        items = decodeURIComponent(decodeURIComponent(matcher[1]));
                    } catch (e) {
                        try {
                            items = decodeURIComponent(matcher[1]);
                        } catch (e) {
                            items = matcher[1];
                        }
                    }
                }
                return items;
            },
            beforeClose(action, done) {
                var keyNumlength = this.username.length;
                var tell = /^1[0|3|4|5|7|8][0-9]\d{8}$/;
                if (action === 'confirm') {
                    if (keyNumlength > 11 || keyNumlength < 11) {
                        Toast.fail('请输入正确的手机号!');
                        done(false);
                    } else if (keyNumlength == 11 && tell.test(this.username)) {
                        done();
                    }
                } else if (action === 'cancel') {
                    done();
                }
            },
            queryFeeByPhone(flg) {
                this.axios.get('', {})
                    .then((response) => {
                        if (flg == true) {
                            if (response.data.code == "20904") {
                                this.statesh = false;
                                this.isActive = true;
                                Toast.fail('支付已完成，请尽快离场!');
                                this.msg = "支付已完成，请尽快离场！"
                            } else if (response.data.code == "20901") {
                                this.statesh = false;
                                this.isActive = true;
                                Toast.fail('支付已完成，请尽快离场!');
                                this.msg = "支付已完成，请尽快离场！"
                            } else if (response.data.body.orderInfo[0].remainingFee == 0) {
                                this.statesh = false;
                                this.isActive = true;
                                Toast.fail('支付已完成，请尽快离场!');
                                this.msg = "支付已完成，请尽快离场！"
                            } else {
                                this.adddateist(response);
                            }
                        } else {
                            this.adddateist(response);
                            this.queryFee(this.cardnum, false);
                            this.username = "";
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            confirm: function (value) {
                this.queryFeeByPhone();
            },
            carnumclick(carnum) {
                var numlist = carnum.split("");
                this.areaName = numlist[0];
                this.areaLetter = numlist[1];
                this.numOne = numlist[2];
                this.numTwo = numlist[3];
                this.numThree = numlist[4];
                this.numFour = numlist[5];
                this.numFive = numlist[6];
                if (numlist.length === 8) {
                    this.numSix = numlist[7];
                } else {
                    this.numSix = '';
                }
            },
            feeHourClick(val) {
                if (this.areaName && this.areaLetter && this.numOne && this.numTwo && this.numThree && this.numFour && this.numFive) {
                    if (this.checkbox && this.numSix) {
                        this.isFeeHourClick = true
                    } else if (!this.checkbox) {
                        this.isFeeHourClick = true
                    }
                }
                this.keyboardShow = false
                if (val === 'one') {
                    this.isOne = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'two') {
                    this.isTwo = true
                    this.isOne = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'three') {
                    this.isThree = true
                    this.isTwo = false
                    this.isOne = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'four') {
                    this.isFour = true
                    this.isTwo = false
                    this.isThree = false
                    this.isOne = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'five') {
                    this.isFive = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isOne = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'six') {
                    this.isSix = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isOne = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'seven') {
                    this.isSeven = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isOne = false
                    this.isEight = false
                    this.isOther = false
                } else if (val === 'eight') {
                    this.isEight = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isOne = false
                    this.isOther = false
                } else if (val === 'other') {
                    this.isOther = true
                    this.isTwo = false
                    this.isThree = false
                    this.isFour = false
                    this.isFive = false
                    this.isSix = false
                    this.isSeven = false
                    this.isEight = false
                    this.isOne = false
                }
            },
            DialogConfirm() {
                if (this.carOrder === "") {
                    Toast.fail('订单不存在!');
                    return;
                }
                Toast.loading({
                    mask: true,
                    message: '下单中...'
                });
                let _this = this;
                /*判断是否使用优惠券*/
                var couponType = null;
                var redeemCode = null;
                if (this.chosenCoupon >= 0) {
                    couponType = 0
                    redeemCode = this.coupons[this.chosenCoupon].id
                }
                this.$api.parking.pay({
                    orderNo: this.carOrder,
                    openId: this.openid,
                    numberPlate: this.cardnum,
                    couponType: couponType,
                    couponValue: redeemCode
                })
                    .then((res) => {
                        if (res.code == 0) {
                            var data = res.data;
                            this.appId = data.appId;
                            this.timeStamp = data.timeStamp;
                            this.nonceStr = data.nonceStr;
                            this.packages = data.packageValue;
                            this.signType = data.signType;
                            this.paySign = data.paySign;
                            _this.callpay();
                        } else {
                            Toast.fail(res.msg);
                        }
                    })
            },
            FreeConfirm() {
                if (this.carOrder === "") {
                    Toast.fail('订单不存在!');
                    return;
                }
                const toast = Toast.loading({
                    mask: true,
                    forbidClick: true,
                    message: '下单中...',
                    duration: 0
                });
                /*判断是否使用优惠券*/
                var couponType = null;
                var redeemCode = null;
                if (this.chosenCoupon >= 0) {
                    couponType = 0
                    redeemCode = this.coupons[this.chosenCoupon].id
                }
                this.$api.parking.free({
                    orderNo: this.carOrder,
                    openId: this.openid,
                    numberPlate: this.cardnum,
                    couponType: couponType,
                    couponValue: redeemCode
                })
                    .then((res) => {
                        if (res.code == 0) {
                            toast.clear()
                            this.$api.parking.cancel({carNo: this.plateNumber})//解除订单锁定
                            this.$router.push({path: "/pay_success", query: {orderNo: this.carOrder}})
                        } else {
                            this.$api.parking.cancel({carNo: this.plateNumber})//解除订单锁定
                            toast.clear()
                            Toast.fail(res.msg)
                        }
                    }).catch(error => {
                    this.$api.parking.cancel({carNo: this.plateNumber})//解除订单锁定
                    toast.clear()
                    Toast.fail(res.msg);
                })
            },
            finished() {

                this.statesh = false;
            },
            DialogCancel() {

            },
            carTypeChange(val) {
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                if (!val) { // 切换到普通车牌
                    if (this.numFour) {
                        this.isNumFive = true
                        this.key = 7
                    }
                } else { // 切换到新能源车牌
                    if (this.numFive) {
                        this.isNumSix = true
                        this.key = 8
                    }
                }
            },
            chooseCarno(carNum) {
                // Toast.fail(carNum)
                this.carnumclick(carNum);
            },
            btnClickYue() {
                this.isYue = true
                this.isA = false
                this.isUp = true
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.keyboardShow = true
                this.keyboard = 'txt'
                this.key = 1
            },
            btnWordClick(rows, index, i) {
                console.log(this.key);
                console.log(i);
                switch (this.key) {
                    case 1:
                        this.areaName = i
                        break;
                    case 2:
                        this.areaLetter = i
                        break;
                    case 3:
                        this.numOne = i
                        break;
                    case 4:
                        this.numTwo = i
                        break;
                    case 5:
                        this.numThree = i
                        break;
                    case 6:
                        this.numFour = i
                        break;
                    case 7:
                        this.numFive = i
                        break;
                    case 8:
                        this.numSix = i
                        break;
                }
                var num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix;
                console.log(num);
                // if(num.indexOf('undefined') != -1){
                //   Toast.fail('出现异常!请刷新重试');
                //   return;
                // }
                this.cardnum = num;
                this.selected = i;
                if (this.typechagel == true) {
                    if (i == 8) {
                        this.keyboardShow = false;
                        //  this.queryFee(num,true);
                    }
                } else {
                    if (i == 7) {
                        this.keyboardShow = false;
                        // this.queryFee(num,true);
                        // setTimeout(() => {
                        //     this.completeClick('true');
                        // }, 100)
                    }
                }

                if (this.key === 1) {
                    if (this.areaName === '临') {
                        this.areaLetter = ''
                        this.numOne = ''
                        this.numTwo = ''
                        this.numThree = ''
                        this.numFour = ''
                        this.numFive = ''
                        this.numSix = ''
                    }
                    this.areaName = i
                    this.isSelectl = false
                    document.getElementById('letter').click()
                } else if (this.key === 2) {
                    this.areaLetter = i
                    document.getElementById('numOne').click()
                } else if (this.key === 3) {
                    this.numOne = i
                    document.getElementById('numTwo').click()
                } else if (this.key === 4) {
                    this.numTwo = i
                    document.getElementById('numThree').click()
                } else if (this.key === 5) {
                    this.numThree = i
                    document.getElementById('numFour').click()
                } else if (this.key === 6) {
                    this.numFour = i
                    document.getElementById('numFive').click()
                } else if (this.key === 7) {
                    this.numFive = i
                    if (this.checkbox) {
                        document.getElementById('numSix').click()
                    }
                } else if (this.key === 8) {
                    this.numSix = i
                }
                if (this.key === 7 || this.key === 8) {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警']
                } else if (this.key === 3 || this.key === 4 || this.key === 5 || this.key === 6) {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警']
                }
            },
            btnBottomClick(val) {
                if (val === '新') {
                    if (this.areaName === '临') {
                        this.areaLetter = ''
                        this.numOne = ''
                        this.numTwo = ''
                        this.numThree = ''
                        this.numFour = ''
                        this.numFive = ''
                        this.numSix = ''
                    }
                    this.areaName = '新'
                    this.isSelectx = true
                    this.isSelectl = false
                    document.getElementById('letter').click()
                } else if (val === '使') {
                    this.areaName = '使'
                    this.areaLetter = ''
                    this.numOne = ''
                    this.numTwo = ''
                    this.numThree = ''
                    this.numFour = ''
                    this.numFive = ''
                    this.numSix = ''
                    document.getElementById('letter').click('isLin')
                } else if (val === '民') {
                    this.areaName = '民'
                    this.isSelectl = true
                    this.isSelectx = false
                    this.isDisable = true
                    this.areaLetter = '航'
                    this.numOne = ''
                    this.numTwo = ''
                    this.numThree = ''
                    this.numFour = ''
                    this.numFive = ''
                    this.numSix = ''
                    document.getElementById('letter').click('isLin')
                } else if (val === '鲁') {
                    this.areaName = '鲁'
                    document.getElementById('letter').click('isLin')
                } else if (val === '领') {
                    this.areaName = '领'
                    document.getElementById('letter').click('isLin')
                }
            },
            btnBottomNumClick(i) {
                this.selected = i
                if (this.key === 2) {
                    this.areaLetter = i
                    this.btnClickNum('one')
                } else if (this.key === 3) {
                    this.numOne = i
                    document.getElementById('numTwo').click()
                } else if (this.key === 4) {
                    this.numTwo = i
                    document.getElementById('numThree').click()
                } else if (this.key === 5) {
                    this.numThree = i
                    document.getElementById('numFour').click()
                } else if (this.key === 6) {
                    this.numFour = i
                    document.getElementById('numFive').click()
                } else if (this.key === 7) {
                    this.numFive = i
                    if (this.checkbox) {
                        document.getElementById('numSix').click()
                    }
                } else if (this.key === 8) {
                    this.numSix = i
                }
                var num
                if (!this.checkbox) {
                    num = this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive
                } else if (this.checkbox) {
                    num = this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix
                }
                if (num.length + i.length == 8 || num.length + i.length == 7) {
                    this.completeClick('true')
                }
            },
            historyNum() {
                var val = event.currentTarget.innerText.replace(/-/g, "")
                this.checkShow = true;
                if (val.length == 7) {
                    this.isNumSix = false;
                    this.checkbox = true;
                    this.bindShow = false;
                    this.carnumclick(val);
                }
                if (val.length == 8) {
                    this.isNumSix = true;
                    this.checkbox = true;
                    this.bindShow = false;
                    setTimeout(() => {
                        this.carnumclick(val);
                    }, 100)
                }
            },
            btnClickA() {
                this.isDisable = true
                this.isA = true
                this.isYue = false
                this.isUp = true
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.keyboardShow = true
                this.keyboard = 'num'
                this.key = 2
            },
            btnClickNum(name) {
                if (this.isSelectl) {
                    this.isDisable = true
                } else {
                    this.isDisable = false
                }
                this.keyboard = 'num'
                this.keyboardShow = true
                this.isYue = false
                this.isA = false
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.isUp = true
                if (name === 'one') {
                    this.isNumOne = true
                    this.key = 3
                } else if (name === 'two') {
                    this.isNumTwo = true
                    this.key = 4
                } else if (name === 'three') {
                    this.isNumThree = true
                    this.key = 5
                } else if (name === 'four') {
                    this.isNumFour = true
                    this.key = 6
                } else if (name === 'five') {
                    this.isNumFive = true
                    this.key = 7
                } else if (name === 'six') {
                    this.isNumSix = true
                    this.key = 8
                }
                if (name === 'five' || name === 'six') {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警']
                } else {
                    this.carNumBottom = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '学', '警']
                }
            },
            completeClick(judge) {
                console.log(judge)
                this.isYue = false
                this.isA = false
                this.isNumOne = false
                this.isNumTwo = false
                this.isNumThree = false
                this.isNumFour = false
                this.isNumFive = false
                this.isNumSix = false
                this.isUp = false
                this.isDown = true
                this.keyboardShow = false
                this.checkShow = true
                var num = this.areaName + '-' + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix;
                console.log('num:' + num)
                if (num === '') {
                    Toast.fail('请输入车牌');
                } else if (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '') {
                    Toast.fail('请输入完整车牌');
                } else if (judge === 'true') {
                    this.queryFee(num, true);
                    this.cardnum = num;
                }
            },
            clearClick() {
                if (this.key === 1) {
                    this.areaName = ''
                } else if (this.key === 2) {
                    document.getElementById('font').click()
                    this.areaLetter = ''
                } else if (this.key === 3) {
                    document.getElementById('letter').click()
                    this.numOne = ''
                } else if (this.key === 4) {
                    document.getElementById('numOne').click()
                    this.numTwo = ''
                } else if (this.key === 5) {
                    document.getElementById('numTwo').click()
                    this.numThree = ''
                } else if (this.key === 6) {
                    document.getElementById('numThree').click()
                    this.numFour = ''
                } else if (this.key === 7) {
                    document.getElementById('numFour').click()
                    this.numFive = ''
                } else if (this.key === 8) {
                    document.getElementById('numFive').click()
                    this.numSix = ''
                }
            },
            addCar() {
                var num
                if (!this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive
                } else if (this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix
                }
                if (num === '') {
                    Toast.fail('请输入车牌');
                } else if (!this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '')) {
                    Toast.fail('请输入完整车牌');
                } else if (this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '' || this.numSix === '')) {
                    Toast.fail('请输入完整车牌');
                } else {
                    this.callpay();
                }
            },
            btnClickRule() {
                let msg = "";
                this.$api.parking.price()
                    .then(res => {
                        msg = res.data;
                    })
                Dialog.alert({
                    title: '缴费规则',
                    message: msg
                }).then(() => {
                    // on close
                });
            },
            bindShowClick() {
                this.token = Cookies.get("token")
                this.$api.parking.bindingList({openId: this.token}).then(res => {
                    if (res.code == 0 && res.list.length > 0) {
                        this.bindList = res.list;
                        this.bindShow = true
                    } else {
                        this.bindShow = false
                        Toast.fail('暂无已绑定车牌');
                    }
                })
            },
            onChange(index) {
                this.showList = false;
                this.chosenCoupon = index;
                var openid = null;
                var redeemCode = null;
                if (this.chosenCoupon >= 0) {
                    console.log(this.coupons[index].id)
                    openid = this.openid
                    redeemCode = this.coupons[index].id
                }
                this.$api.parking.getCarOrder({
                    carNo: this.plateNumber,
                    openid: openid,
                    redeemCode: redeemCode
                })
                    .then((response) => {
                        this.adddateist(response, true);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            onExchange(code) {
                Toast.fail('暂未开放');
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.areaName = '粤'
                vm.areaLetter = ''
                vm.numOne = ''
                vm.numTwo = ''
                vm.numThree = ''
                vm.numFour = ''
                vm.numFive = ''
                vm.numSix = ''
            })
        }
    }
</script>

<style rel="stylesheet/less" lang="less" scoped>
    @media (max-width: 360px) {

    }

    @media (max-width: 480px) {

    }

    .van-checkbox {
        padding-right: 22px !important;
    }

    .van-field__control {
        border: 1px solid #f5f5f5;
        margin: 0;
        padding: 7px;
        width: 100%;
        resize: none;
        display: block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: transparent;

    }

    .van-dialog, .van-cell {
        background: rgba(252, 252, 252, 0.8);
    }

    .parking-title {
        text-align: left;
        color: #1B1B1B;
        background: #fff;
        padding: 15px;
        font-size: 17px;
    }

    .parking-note {
        text-align: center;
        color: #888888;
        padding-bottom: 10px;
    }

    .parking-carNo {
        text-align: center;
        color: #1B1B1B;
        font-size: 25px;
        padding-bottom: 10px;
    }

    .parking-title-style1 {
        color: #1B1B1B;
        font-size: 15px;
    }

    .parking-title-style2 {
        color: #E58F9A;
        font-size: 15px;
    }

    .feeClass {
        color: #E58F9A;
        font-size: 20px;
    }

    .van-cell__value--alone {
        margin-bottom: 10px;
        background: #fff;
    }

    .latbens {
        margin-left: 6px;
        background: #f9fafb !important;
    }

    .van-checkbox {
        float: right;
        padding-right: 6px;
        font-size: 14px;
    }

    .keybyn, .keynts {
    }

    /*.keybyn:nth-child(4) {*/
    /*margin-left: 20px;*/
    /*margin-right: 20px;*/
    /*}*/

    .toastti {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #646464;
        letter-spacing: -0.68px;
        text-align: center;
        padding: 16px 0;
        background: rgba(252, 252, 252, 0.80);
    }

    .van-checkbox__icon, .van-checkbox__label {
        line-height: 12px;
    }

    .van-checkbox__label {
        margin-left: 5px !important;
        color: #999;
    }

    .ze-checkbox-text {
        font-size: 13px;
        padding-right: 10px;
    }

    .ze-checkbox {
        float: right;
    }

    .van-cell {
        padding: 5px 15px;
    }

    .surepay {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #8C8C8C;
        letter-spacing: -0.34px;
        text-align: center;
        margin: 4px 0;
    }

    .paynum {
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #EA2929;
        letter-spacing: -0.7px;
        padding-left: 10px;
    }

    .van-checkbox__icon .van-icon {
        width: 15px !important;
        height: 15px !important;
        position: relative;
        top: 6px;
    }

    .van-icon-success::before {
        position: relative;
        top: -6px;
    }

    .paybtn {
        height: 40px;
        line-height: 37px;
        background: #0290FF;
        border: 1px solid #0290FF;
        width: 100%;
        float: right;
    }

    .titlespan {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #8C8C8C;
        letter-spacing: -0.34px;
    }

    /*.active {*/
    /*color: #f00 !important;*/
    /*opacity: 1 !important;*/
    /*font-size: 15px !important;*/
    /*}*/

    .paymentcontent {
        margin-top: 15px;
        margin: 5px 10px 16px 16px;
        border: 1px solid #E8E8E8;
        color: #4386BF !important;
        background: #fff;
    }

    .paymentcontent p {
        opacity: 0.28;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #121212;
        letter-spacing: -0.2px;
        text-align: center;
        padding: 8px;
        background: #fff;
    }

    .van-cell {
        color: #4386BF !important;
    }

    .notats {
        text-align: center;
        margin: 40px;
    }

    #dispense {
        .navbar {
            .right {
                a {
                    font-size: 30px;
                    color: #ffc200;
                }
            }
        }

        .ze-checkbox > input[type=checkbox] {
            position: absolute;
            left: -9999em;
        }

        .yuxradis {
            width: 5px;
            height: 5px;
            background: #ccc;
            border-radius: 50%;
            display: inline-block;
            position: relative;
            top: -2px;
            margin-right: 5px;
        }

        .ze-checkbox > input[type=checkbox]:checked + .ze-checkbox-icon {
            background-color: currentColor;
            border-color: #ffC400;
        }

        .paytext img {
            width: 25px;
            padding: 10px 4px;
        }

        .paytext {
            display: flex;
            width: 100%;
            font-size: 13px;
            text-align: left;
            border-top: 1px solid #E8E8E8;
            padding-top: 10px;
        }

        .addresstexy {
            opacity: 0.8;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #909191;
            line-height: 20px;
        }

        .xqstop {
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #212223;
        }

        .paytonst ul li {
            float: left;
            line-height: 30px;
            padding-left: 10px;
            color: #346df1;
        }

        .paytonst {
            padding: 5px 10px;
            position: absolute;
            top: 50px;
            z-index: 99999;
            border: 1px solid #ccc;
            left: 0;
            font-size: 13px;
            width: 220px;
            background: #fff;
            box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.20);
        }

        .paytonst:after {
            content: "";
            width: 0;
            height: 0;
            border-width: 0 10px 10px;
            border-style: solid;
            border-color: transparent transparent #fff; /*透明 透明  灰*/
            position: absolute;
            top: -5px;
            left: 10px;
        }

        .ze-checkbox-icon {
            border: 1px solid #ccc; /*no*/
            border-radius: 2px;
            display: inline-block;
            position: relative;
            z-index: 10;
            vertical-align: bottom;
            pointer-events: none;

            > i {
                content: "";
                position: absolute;
                top: 45%;
                left: 50%;
                border: 3px solid #ffC400; /*no*/
                border-top: 0;
                border-left: 0;
                -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
                transform: translate(-50%, -50%) rotate(45deg) scale(0);
            }
        }

        .ze-checkbox > input[type=checkbox]:checked + .ze-checkbox-icon > i {
            -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
            transform: translate(-50%, -50%) rotate(45deg) scale(1);
            -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
        }

        .van-checkbox__icon--round img {
            width: 25px;
        }

        .content-car-number {
            text-align: center;

            .car-content-title {
                display: block;
                justify-content: space-between;
                padding: 0 32px;
                margin-bottom: 10px;

                span {
                    font-size: 15px;
                }

                .ze-checkbox {
                    display: flex;
                    align-items: center;
                }

                .ze-radio-text {
                    font-size: 13px;
                }

                .ze-checkbox-icon {
                    color: #FFEDB1 !important;
                    margin-right: 8px;
                }
            }

            .content-section {
                .content-section-flex {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 20px;
                    margin-bottom: 5px;

                    .blank-border {
                        height: 34px;
                        width: 1px;
                        border-right: 1px solid #E8E8E8;
                        float: left;
                        margin-left: 0px;
                        z-index: 1;
                        margin-top: 3px;

                        &.blank-border-first {
                            margin-top: 3px;
                            position: relative;
                            top: -3px;
                        }
                    }

                    &.flex-card {
                        color: #000;

                        .flex-btn {
                            width: 35px;
                            height: 40px;
                            border: none;
                            text-align: center;
                            background: #fff;
                            font-size: 20px;
                            color: #000;
                            border-radius: 10px;
                            padding: 1px 6px;
                        }

                        .flex-btns {
                            text-align: center;
                            background: #fff;
                            width: fit-content;
                            position: relative;
                            height: 40px;
                            border-radius: 10px;

                            button {
                                width: 35px;
                                height: 40px;
                                border: none;
                                font-size: 20px;
                                color: #000;
                                border-radius: 50%;
                                background: transparent;
                                float: left;
                                margin-left: 0px;
                                z-index: 2;
                                position: relative;
                                padding: 1px 6px;

                                &:first-child {
                                    margin-left: 0;
                                }
                            }
                        }

                        .flex-mid {
                            margin: 0 0.1rem;

                            span {
                                display: block;
                                width: 10px;
                                height: 10px;
                                border-radius: 50%;
                                background: #ddd;
                            }
                        }

                        .isClick {
                            border: 1px solid #ffc200; /*no*/
                            z-index: 50;
                            border-radius: 0px;
                        }

                        .isNumClick {
                            border-radius: 0px !important;
                            border: 1px solid #ffc200 !important; /*no*/
                            z-index: 10;
                            background-color: #fff !important;
                        }
                    }

                    .flex-card-border {
                        border: 1px solid #ddd; /*no*/
                        border-radius: 8px;
                        background: #fff;
                        position: relative;
                    }
                }
            }
        }

        .fee-hours {
            padding: 0 32px;
            margin-bottom: 80px;

            .fee-hours-title {
                margin-bottom: 16px;
                font-size: 15px;
            }

            .fee-hours-content {
                display: flex;
                justify-content: space-between;
                margin-bottom: 32px;

                &.fee-hours-num {
                    display: block;
                }
            }

            .fee-hours-num {
                width: 102px;
                height: 34px;
                font-size: 13px;
                background: #ececec;
                border-radius: 8px;
                text-align: center;
                line-height: 34px;
            }

            .isFeeHour {
                background: #ffeeb1;
            }
        }

        .searchPay-btn {
            text-align: center;
            /*background-color: #f6f6f6;*/
            margin: 0 32px 0;

            button {
                border-radius: 8px;
                margin-bottom: 20px;

                &.searchPay-btn-click {
                    box-shadow: 0px 5px 10px 0px rgba(255, 227, 135, 1);
                    background: #ffc200;
                    color: #101010;
                }
            }
        }

        .keyboard {
            width: 100%;
            height: 300px;
            position: fixed;
            bottom: -300px;
            background: #eeeeee;
            z-index: 10000000;

            &.animationDown {
                animation: slide_dowms 0.3s ease-out;
                animation-fill-mode: forwards;
            }

            &.animationUp {
                animation: slide_ups 0.3s ease-out;
                animation-fill-mode: forwards;
            }

            .btn-complete {
                height: 40px;
                text-align: right;
                color: #ffc200;
                font-size: 16px;
                width: 100%;
                background: #fff;
                border: none;
                border-top: 1px solid #eee;
                margin-bottom: 10px;

                span {
                    margin-right: 15px;
                }
            }

            .keyboard-row {
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                padding: 0 8px;
                color: #333;

                &:first-child {
                    margin-top: 5px;
                }

                .keyboard-row-items {
                    display: flex;
                    justify-content: left;
                }

                .keyboard-row-bottom {
                    display: flex;
                    justify-content: space-between;
                }

                .keyboard-row-item {
                    width: 9.5%;
                    height: 50px;
                    background: #fff;
                    font-size: 15px;
                    text-align: center;
                    border: 1px solid #ccc; /*no*/
                    border-radius: 5px;
                    color: #333;
                    /*padding: 1px 6px;*/

                    &.bottom {
                        /*height: 35px;*/
                        width: 8.8%;
                        /*line-height: 35px;*/
                        background: #fff;
                        color: #333;
                        /*padding: 1px 8px;*/
                        margin: 0px 2px;
                        /*margin-right: 0.08rem;*/
                    }

                    &.clear {
                        width: 9.5%;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            width: 100%;
                        }
                    }
                }

                .none-botton {
                    border: none;
                    height: 40px;
                    width: 8.8%;
                    visibility: hidden;
                }
            }

            button {
                &:active {
                    background: #f4f4f4 !important;
                    color: #999 !important;
                    height: 50px !important;
                    margin-top: -5px !important;
                }
            }
        }

        @keyframes slide_ups {
            from {
                bottom: -300px;
            }
            to {
                bottom: 0px;
            }
        }
        @keyframes slide_dowms {
            from {
                bottom: 0px;
            }
            to {
                bottom: -320px;
            }
        }

        button:disabled {
            background: #f4f4f4 !important;
            color: #8f8f8f !important;
        }

        .active {
            &:active {
                background: #f4f4f4 !important;
                color: #999 !important;
            }
        }

        .history-btn {
            height: 25px;
            line-height: 20px;
            background: #D3D3D3;
            border: 1px solid #D3D3D3;
            border-radius: 11px;
            font-size: 0.6em;
            color: white;
            margin-left: 20px;
        }

        .van-button--mini {
            display: inline-block;
            min-width: 53px;
            height: 25px;
            font-size: 10px;
            line-height: 25px;
        }

        .history-border {
            border-bottom: 1px dashed #cecece;
        }

        .history-border:nth-last-child(1) {
            border-bottom: none;
        }

    }
</style>